$ibo-button--sibling-spacing: 5px !default;
$ibo-button--padding-y: 6px !default;
$ibo-button--padding-x: 9px !default;
$ibo-button--border: 0 !default;
$ibo-button--border-radius: $ibo-border-radius-400 !default;
$ibo-button--box-shadow-bottom: 0px 2px 0px !default;
$ibo-button--box-shadow-top: inset 0px 2px 0px !default;

$ibo-button--label--margin-left: 4px !default;

$ibo-button-colors: (
		'regular': (
				/* Semantics */
				'neutral': (
						'': (
								$ibo-color-secondary-100,
								$ibo-color-grey-900,
								$ibo-button--box-shadow-bottom $ibo-color-secondary-300,
						),
						':hover': (
								$ibo-color-secondary-200,
								$ibo-color-grey-900,
								$ibo-button--box-shadow-bottom $ibo-color-secondary-300,
						),
						':active': (
								$ibo-color-secondary-200,
								$ibo-color-grey-900,
								$ibo-button--box-shadow-top $ibo-color-secondary-300 #{','} $ibo-button--box-shadow-bottom $ibo-color-secondary-200,
						),
						':disabled': (
								$ibo-color-grey-300,
								$ibo-color-grey-700,
								$ibo-button--box-shadow-top $ibo-color-grey-300,
						),
				),
				/* Primary action does not have the colors from the primary brand color, at least not for now */
				'primary': (
						'': (
								$ibo-color-cyan-700,
								$ibo-color-white-100,
								$ibo-button--box-shadow-bottom $ibo-color-cyan-900,
						),
						':hover': (
								$ibo-color-cyan-800,
								$ibo-color-white-100,
								$ibo-button--box-shadow-bottom $ibo-color-cyan-900,
						),
						':active': (
								$ibo-color-cyan-800,
								$ibo-color-white-100,
								$ibo-button--box-shadow-top $ibo-color-cyan-900 #{','} $ibo-button--box-shadow-bottom $ibo-color-cyan-800,
						),
						':disabled': (
								$ibo-color-grey-300,
								$ibo-color-grey-700,
								$ibo-button--box-shadow-top $ibo-color-grey-300,
						),
				),
				'secondary': (
						'': (
								$ibo-color-secondary-100,
								$ibo-color-grey-900,
								$ibo-button--box-shadow-bottom $ibo-color-secondary-300,
						),
						':hover': (
								$ibo-color-secondary-200,
								$ibo-color-grey-900,
								$ibo-button--box-shadow-bottom $ibo-color-secondary-300,
						),
						':active': (
								$ibo-color-secondary-200,
								$ibo-color-grey-900,
								$ibo-button--box-shadow-top $ibo-color-secondary-300 #{','} $ibo-button--box-shadow-bottom $ibo-color-secondary-200,
						),
						':disabled': (
								$ibo-color-grey-300,
								$ibo-color-grey-700,
								$ibo-button--box-shadow-top $ibo-color-grey-300,
						),
				),
				'danger': (
						'': (
								$ibo-color-danger-600,
								$ibo-color-white-100,
								$ibo-button--box-shadow-bottom $ibo-color-danger-800,
						),
						':hover': (
								$ibo-color-danger-700,
								$ibo-color-white-100,
								$ibo-button--box-shadow-bottom $ibo-color-danger-800,
						),
						':active': (
								$ibo-color-danger-700,
								$ibo-color-white-100,
								$ibo-button--box-shadow-top $ibo-color-danger-800 #{','} $ibo-button--box-shadow-bottom $ibo-color-danger-700,
						),
						':disabled': (
								$ibo-color-grey-300,
								$ibo-color-grey-700,
								$ibo-button--box-shadow-top $ibo-color-grey-300,
						),
				),
				'success': (
						'': (
								$ibo-color-success-700,
								$ibo-color-white-100,
								$ibo-button--box-shadow-bottom $ibo-color-success-900,
						),
						':hover': (
								$ibo-color-success-800,
								$ibo-color-white-100,
								$ibo-button--box-shadow-bottom $ibo-color-success-900,
						),
						':active': (
								$ibo-color-success-800,
								$ibo-color-white-100,
								$ibo-button--box-shadow-top $ibo-color-success-900 #{','} $ibo-button--box-shadow-bottom $ibo-color-success-800,
						),
						':disabled': (
								$ibo-color-grey-300,
								$ibo-color-grey-700,
								$ibo-button--box-shadow-top $ibo-color-grey-300,
						),
				),
				/* Colors */
				'red': (
						'': (
								$ibo-color-red-600,
								$ibo-color-white-100,
								$ibo-button--box-shadow-bottom $ibo-color-red-800,
						),
						':hover': (
								$ibo-color-red-700,
								$ibo-color-white-100,
								$ibo-button--box-shadow-bottom $ibo-color-red-800,
						),
						':active': (
								$ibo-color-red-700,
								$ibo-color-white-100,
								$ibo-button--box-shadow-top $ibo-color-red-800 #{','} $ibo-button--box-shadow-bottom $ibo-color-red-700,
						),
						':disabled': (
								$ibo-color-grey-300,
								$ibo-color-grey-700,
								$ibo-button--box-shadow-top $ibo-color-grey-300,
						),
				),
				'green': (
						'': (
								$ibo-color-green-700,
								$ibo-color-white-100,
								$ibo-button--box-shadow-bottom $ibo-color-green-900,
						),
						':hover': (
								$ibo-color-green-800,
								$ibo-color-white-100,
								$ibo-button--box-shadow-bottom $ibo-color-green-900,
						),
						':active': (
								$ibo-color-green-800,
								$ibo-color-white-100,
								$ibo-button--box-shadow-top $ibo-color-green-900 #{','} $ibo-button--box-shadow-bottom $ibo-color-green-800,
						),
						':disabled': (
								$ibo-color-grey-300,
								$ibo-color-grey-700,
								$ibo-button--box-shadow-top $ibo-color-grey-300,
						),
				),
				'cyan': (
						'': (
								$ibo-color-cyan-500,
								$ibo-color-white-100,
								$ibo-button--box-shadow-bottom $ibo-color-cyan-900,
						),
						':hover': (
								$ibo-color-cyan-700,
								$ibo-color-white-100,
								$ibo-button--box-shadow-bottom $ibo-color-cyan-900,
						),
						':active': (
								$ibo-color-cyan-700,
								$ibo-color-white-100,
								$ibo-button--box-shadow-top $ibo-color-cyan-900 #{','} $ibo-button--box-shadow-bottom $ibo-color-cyan-700,
						),
						':disabled': (
								$ibo-color-grey-300,
								$ibo-color-grey-700,
								$ibo-button--box-shadow-top $ibo-color-grey-300,
						),
				)
		),
		'alternative': (
				/* Semantics */
				'neutral': (
						'': (
								transparent,
								$ibo-color-grey-900,
								$ibo-button--box-shadow-bottom transparent,
						),
						':hover': (
								$ibo-color-secondary-100,
								$ibo-color-grey-900,
								$ibo-button--box-shadow-bottom $ibo-color-secondary-100,
						),
						':active': (
								$ibo-color-secondary-100,
								$ibo-color-grey-900,
								$ibo-button--box-shadow-top $ibo-color-secondary-200 #{','} $ibo-button--box-shadow-bottom $ibo-color-secondary-100,
						),
						':disabled': (
								transparent,
								$ibo-color-grey-600,
								$ibo-button--box-shadow-top transparent,
						),
				),
				/* Primary action does not have the colors from the primary brand color, at least not for now */
				'primary': (
						'': (
								transparent,
								$ibo-color-cyan-800,
								$ibo-button--box-shadow-bottom transparent,
						),
						':hover': (
								$ibo-color-white-100,
								$ibo-color-grey-900,
								$ibo-button--box-shadow-bottom $ibo-color-white-100,
						),
						':active': (
								$ibo-color-white-100,
								$ibo-color-grey-900,
								$ibo-button--box-shadow-top $ibo-color-white-100 #{','} $ibo-button--box-shadow-bottom $ibo-color-white-100,
						),
						':disabled': (
								transparent,
								$ibo-color-grey-600,
								$ibo-button--box-shadow-top transparent,
						),
				),
				'secondary': (
						'': (
								transparent,
								$ibo-color-grey-900,
								$ibo-button--box-shadow-bottom transparent,
						),
						':hover': (
								$ibo-color-secondary-100,
								$ibo-color-grey-900,
								$ibo-button--box-shadow-bottom $ibo-color-secondary-100,
						),
						':active': (
								$ibo-color-secondary-100,
								$ibo-color-grey-900,
								$ibo-button--box-shadow-top $ibo-color-secondary-200 #{','} $ibo-button--box-shadow-bottom $ibo-color-secondary-100,
						),
						':disabled': (
								transparent,
								$ibo-color-grey-600,
								$ibo-button--box-shadow-top transparent,
						),
				),
				'danger': (
						'': (
								transparent,
								$ibo-color-danger-700,
								$ibo-button--box-shadow-bottom transparent,
						),
						':hover': (
								$ibo-color-danger-200,
								$ibo-color-danger-900,
								$ibo-button--box-shadow-bottom $ibo-color-danger-200,
						),
						':active': (
								$ibo-color-danger-200,
								$ibo-color-danger-900,
								$ibo-button--box-shadow-top $ibo-color-danger-700 #{','} $ibo-button--box-shadow-bottom $ibo-color-danger-200,
						),
						':disabled': (
								transparent,
								$ibo-color-grey-600,
								$ibo-button--box-shadow-top transparent,
						),
				),
				'success': (
						'': (
								transparent,
								$ibo-color-success-900,
								$ibo-button--box-shadow-bottom transparent,
						),
						':hover': (
								$ibo-color-success-100,
								$ibo-color-success-900,
								$ibo-button--box-shadow-bottom $ibo-color-success-100,
						),
						':active': (
								$ibo-color-success-100,
								$ibo-color-success-900,
								$ibo-button--box-shadow-top $ibo-color-success-700 #{','} $ibo-button--box-shadow-bottom $ibo-color-success-100,
						),
						':disabled': (
								transparent,
								$ibo-color-grey-600,
								$ibo-button--box-shadow-top transparent,
						),
				),
				/* Colors */
				'red': (
						'': (
								transparent,
								$ibo-color-red-700,
								$ibo-button--box-shadow-bottom transparent,
						),
						':hover': (
								$ibo-color-red-200,
								$ibo-color-red-900,
								$ibo-button--box-shadow-bottom $ibo-color-red-200,
						),
						':active': (
								$ibo-color-red-200,
								$ibo-color-red-900,
								$ibo-button--box-shadow-top $ibo-color-red-700 #{','} $ibo-button--box-shadow-bottom $ibo-color-red-200,
						),
						':disabled': (
								transparent,
								$ibo-color-grey-600,
								$ibo-button--box-shadow-top transparent,
						),
				),
				'green': (
						'': (
								transparent,
								$ibo-color-green-900,
								$ibo-button--box-shadow-bottom transparent,
						),
						':hover': (
								$ibo-color-green-100,
								$ibo-color-green-900,
								$ibo-button--box-shadow-bottom $ibo-color-green-100,
						),
						':active': (
								$ibo-color-green-100,
								$ibo-color-green-900,
								$ibo-button--box-shadow-top $ibo-color-green-700 #{','} $ibo-button--box-shadow-bottom $ibo-color-green-100,
						),
						':disabled': (
								transparent,
								$ibo-color-grey-600,
								$ibo-button--box-shadow-top transparent,
						),
				),
				'cyan': (
						'': (
								transparent,
								$ibo-color-cyan-900,
								$ibo-button--box-shadow-bottom transparent,
						),
						':hover': (
								$ibo-color-cyan-100,
								$ibo-color-cyan-900,
								$ibo-button--box-shadow-bottom $ibo-color-cyan-100,
						),
						':active': (
								$ibo-color-cyan-100,
								$ibo-color-cyan-900,
								$ibo-button--box-shadow-top $ibo-color-cyan-800 #{','} $ibo-button--box-shadow-bottom $ibo-color-cyan-100,
						),
						':disabled': (
								transparent,
								$ibo-color-grey-600,
								$ibo-button--box-shadow-top transparent,
						),
				),
		)
) !default;
@each $sType, $aColors in $ibo-button-colors {
	@each $sColor, $aPseudoclasses in $aColors {
		@each $sPseudoclass, $sAttributes in $aPseudoclasses {
			$bg-color: nth($sAttributes, 1);
			$font-color: nth($sAttributes, 2);
			$box-shadow: nth($sAttributes, 3);
			.ibo-button.ibo-is-#{$sType}.ibo-is-#{$sColor}#{$sPseudoclass} {
				background-color: $bg-color;
				color: $font-color;
				box-shadow: $box-shadow;
			}
		}
	}
}

.ibo-button {
	cursor: pointer;
	@extend %ibo-font-ral-sembol-100;
  text-transform: uppercase;
	padding: $ibo-button--padding-y $ibo-button--padding-x;
	border: $ibo-button--border;
	border-radius: $ibo-button--border-radius;

	& ~ .ibo-button {
		margin-left: $ibo-button--sibling-spacing;
	}

	&.ibo-action-button {
		float: right;
	}
}

/* Only when a button has both an icon and a label */
.ibo-button--icon + .ibo-button--label {
	margin-left: $ibo-button--label--margin-left;
}

